<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Visu de tweets</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type="text/javascript">
            var requete = "Gobelins";
            
            /*** ETAPE 3 : Première visu, sans D3 ***/
            
            $(document).ready(function() {
                
                var hashtags = {};
                
                $.getJSON("http://search.twitter.com/search.json?q="+encodeURIComponent(requete)+"&rpp=100&callback=?",
                function(data) {
                    for (var i in data.results) {
                        var mots = data.results[i].text.split(' ');
                        for (var j in mots) {
                            var mot = mots[j].toLowerCase();
                            if (mot[0] == "#") {
                                if (hashtags[mot]) {
                                    hashtags[mot]++;
                                } else {
                                    hashtags[mot] = 1;
                                }
                            }
                        }
                    }
                    
                    var html = '';
                    for (var i in hashtags) {
                        html += '<div class="barre" style="width:' + 100 * hashtags[i] + 'px">' + i + ': ' + hashtags[i] + '</div>';
                    }
                    $("#visu").html(html);
                    
                })
                
            });
            
        </script>
        <style type="text/css">
            .barre {
                border: 1px solid #000000; padding: 2px 0;
            }
        </style>
    </head>
    <body>
       <div id="visu">
                
       </div>
    </body>
</html>